<template>
  <div class="image-preview-overlay" v-if="visible" @click.self="closePreview">
    <div class="image-preview-container">
      <!-- 关闭按钮 -->
      <div class="close-button" @click="closePreview">
        <close-outlined />
      </div>
      
      <!-- 图片展示区 -->
      <div class="image-content">
        <img :src="imageUrl" :alt="altText" class="preview-image" />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { CloseOutlined } from '@ant-design/icons-vue';

export default defineComponent({
  name: 'ImagePreview',
  components: {
    CloseOutlined
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    imageUrl: {
      type: String,
      default: ''
    },
    altText: {
      type: String,
      default: '图片预览'
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    /**
     * 关闭图片预览
     */
    const closePreview = () => {
      emit('close');
    };

    return {
      closePreview
    };
  }
});
</script>

<style scoped>
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.image-preview-container {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  color: #fff;
  font-size: 18px;
}

.close-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.image-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-image {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}
</style>